<template>
    <el-card :style="{minHeight:`${height}px`}">
        <div slot="header">
            <el-input
                v-model="keyword"
                placeholder="请输入用户名称 / 评论内容"
                style="width: 80%"
                @change="initSearch"
            >
                <el-button slot="append" icon="el-icon-search" @click="initSearch"></el-button>
            </el-input>

        </div>
        <el-row>
            <el-table
                :data="commentListData"
                style="width: 100%"
                :height="tableHeight"
                border
                v-loading="loading"
                ref="table"
            >
                <el-table-column label="id" width="55">
                    <template slot-scope="scope">
                        {{ scope.row.comment_id }}
                    </template>
                </el-table-column>

                <el-table-column label="用户" width="180">
                    <template slot-scope="scope">
                        <el-avatar
                            :src="scope.row.author_image"
                        ></el-avatar>
                        <el-tag
                            size="medium"
                            style="margin-left: 10px;"
                        >{{ scope.row.author }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="评论内容"  >
                    <template slot-scope="scope">
                        {{ scope.row.content }}
                    </template>
                </el-table-column>

                <el-table-column label="修改时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.update_time }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="创建时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="90"  fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="deleteComment(scope.row.comment_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                background
                layout="total,sizes, prev, pager, next, jumper"
                :total="total"
                :current-page="page"
                @current-change="changePage"
                @prev-click="changePage"
                @next-click="changePage"
                @size-change="changeSize"
            ></el-pagination>
        </el-row>
    </el-card>
</template>

<script>
    import { mapGetters } from 'vuex'
    import {getHeight} from "@/utils/regular";
    import { commentAdminList, commentDelete } from '@/api/article'

    export default {
        name: "commentList",
        data() {
            return {
                keyword: '',
                height: 0,
                tableHeight: 500,
                commentListData: [],
                total: 0,
                page: 1,
                pagesize: 10,
                loading: false,
            }
        },
        created() {
            this.initSearch()
            this.height = getHeight() - 92
            this.tableHeight = getHeight() - 258
        },
        computed: {
            // 获取用户数据
            ...mapGetters({
                user: 'user/getUser',
            }),
        },
        methods: {
            // 初始化搜索
            initSearch() {
                this.page = 1
                this.getCommentList()
            },
            // 页码数修改
            changeSize(pagesize) {
                this.pagesize = pagesize
                this.initSearch()
            },
            // 页数修改
            changePage(pagenum) {
                this.page = pagenum
                this.getCommentList()
            },
            // 获取文章列表
            getCommentList() {
                let params = {
                    pagesize: this.pagesize,
                    page: this.page,
                    keyword: this.keyword,
                }
                this.loading = true
                commentAdminList(params)
                    .then(res => {
                        // console.log(res)
                        if (Number(res.code) === 0) {
                            this.commentListData = res.data
                            this.page = res.page
                            this.total = res.count

                            this.$nextTick(() => {
                                this.$refs.table.bodyWrapper.scrollTop = 0
                            })
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                        this.loading = false
                    })
            },
            // 前往创建文章
            goCreate() {
                this.$router.push('/admin/articleEdit')
            },
            // 删除文章
            deleteComment(comment_id) {
                this.$Confirm({
                    message: '确定删除评论',
                    confirmButtonText: '立即删除',
                    success: () => {
                        commentDelete(comment_id)
                            .then(res => {
                                if (Number(res.code) === 0) {
                                    this.initSearch()
                                    this.$Alert({message: res.msg, type: 'success'})
                                } else {
                                    this.$Alert({message: res.msg, type: 'error'})
                                }
                            })
                    }
                })
            }
        },
    }
</script>

<style scoped lang="less">
    .el-card {

        .el-row + .el-row {
            margin-top: 15px;
        }
    }
</style>
